<template>
	<view class="commentsBox">
		<view class="nav">
			<ul>
				<li v-for="(item,index) in navList" :key="item.id" :class="{active: index==checked}"
					@click="changeActive(index)">{{item.title}}
				</li>
			</ul>
		</view>
		<view class="comment">
			<view v-if="commentsList == ''">
				<view class="empty">
					<span>暂无评论</span>
				</view>
			</view>
			<view v-if="commentsList.length!=0 && masterCount==0 && checked==1" class="masterComments">
				<view class="empty">
					<span>楼主暂无评论</span>
				</view>
			</view>
			<view class="comments">
				<view class="Father" v-for="(father, fatherIndex) in commentsList" :key="fatherIndex">
					<view v-show="checked!=1||father.uid==messageUid">
						<view class="AvatarAndNickname" @click="checkUser(father.uid)">
							<view class="CommentAvatar">
								<image :src="'http://cdn.gdxywsw.club/' + father.avatar" />
							</view>
							<view class="CommentNickname">
								{{ father.nickname }}
								<view class="fTag">
									<uni-tag v-if="messageUid==father.uid" :inverted="true" size="mini" text="楼主"
										type="warning" />
								</view>
							</view>
						</view>

						<view class="FatherContent" @click="replyFather(father.id, father.nickname)">
							{{ father.content }}
						</view>

						<view class="FatherBottom">
							<view class="DateAndCid">
								<view class="FatherDate">
									第{{ father.cid }}楼 {{ father.date }}
								</view>
								<view class="Reply" @click="replyFather(father.id, father.nickname)">
									回复
								</view>
								<view class="Delete" @click="changeFatherConfirm(father.id, fatherIndex)"
									v-if="father.uid == userInfo.uid||messageInfo.uid==userInfo.uid">
									删除
								</view>
							</view>

							<view class="AddCommentLike">
								<view class="likeComment" v-if="father.mark==0"
									@click="addALikeForFather(father.id, fatherIndex)">
									<uni-icons type="hand-up"></uni-icons>
								</view>
								<view class="unLikeComment" v-else
									@click="cancelALikeForFather(father.id, fatherIndex)">
									<uni-icons type="hand-up-filled" color="#e43d33"></uni-icons>
								</view>
								<view v-if="father.likes!=0">
									{{ father.likes }}
								</view>
							</view>
						</view>

						<view class="Son" v-for="(son, sonIndex) in father.sonComments" :key="sonIndex">
							<view class="AvatarAndNickname" @click="checkUser(son.uid)">
								<view class="SonAvatar">
									<image :src="'http://cdn.gdxywsw.club/' + son.avatar" />
								</view>
								<view class="SonNickname">{{ son.nickname }}
									<uni-tag v-if="messageUid==son.uid" customStyle="margin:0 3px;" :inverted="true"
										size="mini" text="楼主" type="warning" />
								</view>
								<view class="SonNickname" v-if="son.whoNickname != null">
									<image src="../../static/images/right.png"></image>
									&nbsp;{{ son.whoNickname }}
								</view>
							</view>

							<view class="SonContent" @click="replySon(father.id, son.nickname, son.uid)">
								{{ son.content }}
							</view>

							<view class="SonBottom">
								<view class="SonDateAndReply">
									<view class="SonDate">{{ son.date }}</view>
									<view class="Reply" @click="replySon(father.id, son.nickname, son.uid)">
										回复
									</view>
									<view class="Delete" @click="changeSonConfirm(son.id, fatherIndex, sonIndex)"
										v-if="son.uid == userInfo.uid||messageInfo.uid==userInfo.uid">
										删除
									</view>
								</view>

								<view class="AddCommentLike">

									<view class="likeComment" v-if="son.mark==0"
										@click="addALikeForSon(son.id, fatherIndex, sonIndex)">
										<uni-icons type="hand-up"></uni-icons>
									</view>
									<view class="unLikeComment" v-else
										@click="cancelALikeForSon(son.id, fatherIndex, sonIndex)">
										<uni-icons type="hand-up-filled" color="#e43d33"></uni-icons>
									</view>
									<view v-if="son.likes!=0">
										{{ son.likes }}
									</view>
								</view>
							</view>
						</view>

						<view class="More" v-if="father.comments  > 5 && father.sonComments.length < 6"
							@click="getSonComments(fatherIndex, father.id)">
							点击查看剩余{{ father.comments - 5 }} 条回复
						</view>
						<!-- <view class="Between"></view> -->
					</view>
				</view>

				<!-- <view style="height: 3rem"></view> -->


			</view>
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>

		<view class="AddComment">
			<view class="AddCommentButton">
				<view class="AddCommentLeft">
					<uni-easyinput size="mini" v-model="comment.content" :placeholder="'回复'+whoNickname" ref="input"
						clearable>
					</uni-easyinput>
				</view>
				<view class="AddCommentRight">
					<view style="padding: 0 2px 0 2px">
						<button type="default" style="background-color: #409eff;color: white;" size="mini"
							@click="addComment">发送</button>
					</view>
					<view>
						<button v-if="messageInfo.mark==1" type="warn" size="mini" @click="cancelLikes">取消赞
						</button>
						<button v-else type="primary" size="mini" v-if="messageInfo.mark == 0" @click="addLikes">点赞
						</button>
					</view>

					<view style="padding-left: 2px">
						<button type="default" style="background-color: #909399;color: white;" size="mini"
							@click="cancelComment">取消</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "commentsBox",
		props: {
			// commentsList: {
			// 	type: Array,
			// 	default: {}
			// },
			messageUid: {
				type: String,
				default: ''
			},
			messageInfo: {
				type: Object,
				default: {}
			}

		},
		data() {
			return {
				navList: [{
						title: '全部回复',
						id: 0
					},
					{
						title: '只看楼主',
						id: 1
					}
				],
				checked: 0,
				commentsList: [],
				msgType: '',
				messageText: '',
				masterCount: 0,
				comment: {
					mid: "",
					parentId: "0",
					content: "",
					who: "",
				},
				whoNickname: "",


			};
		},
		computed: {
			...mapState('my_Info', ['userInfo']),

		},
		created() {

		},
		mounted() {
			this.comment.mid = this.messageInfo.mid
			this.getComments()
		},
		methods: {

			// 刷新
			refresh() {
				this.commentsList = []
				this.masterCount = 0
				this.getComments(() => uni.stopPullDownRefresh())

			},

			changeActive(index) {
				this.checked = index
				switch (index) {
					case 0:
						break
					case 1:
						this.count(this.commentsList, this.userInfo.uid)
						break
				}
			},


			// 查看用户
			checkUser(uid) {
				if (uid == this.userInfo.uid) {
					uni.switchTab({
						url: '../../pages/userInfo/userInfo'
					})
				} else {
					uni.navigateTo({
						url: '/subpkg/othersHome/othersHome?otherUid=' + encodeURIComponent(JSON.stringify(
							uid)),
					})
				}
			},


			// 返回评论
			async getComments(cb) {
				console.log(this.messageInfo);
				let {
					data: res
				} = await uni.$http.get('/comments/listCommentByMid/' + this.messageInfo.mid + '/' + this.userInfo.uid)

				cb && cb()

				if (res.code == 2000) {
					this.commentsList = res.data

					this.count(res.data, this.messageInfo.uid)
				}
			},

			// 点赞
			async addLikes() {
				let {
					data: res
				} = await uni.$http.get('/messages/addLikes/' + this.messageInfo.mid);
				if (res.code == 2000) {
					this.$emit('addLikeMsg')
					uni.showToast({
						title: '点赞成功',
						duration: 1000,
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '点赞失败',
						duration: 1500,
						icon: 'error'
					})
				}
			},
			// 取消点赞
			async cancelLikes() {
				let {
					data: res
				} = await uni.$http.get('/messages/cancelLikes/' + this.messageInfo.mid);
				if (res.code == 2000) {
					this.$emit('cancelLikeMsg')
					uni.showToast({
						title: '取消点赞',
						duration: 1000,
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '取消失败',
						duration: 1000,
						icon: 'error'
					})
				}
			},



			// 返回所有子评论
			async getSonComments(index, Id) {

				let {
					data: res
				} = await uni.$http.get('/comments/getSonComments/' + Id + '/' + this.userInfo.uid)
				this.commentsList[index].sonComments = res.data;
			},

			// 父评论回复
			replyFather(id, nickname) {
				this.whoNickname = nickname;
				this.comment.parentId = id;

				wx.nextTick(() => {
					this.$refs.input.onFocus()
				}, 100)
			},
			// 子评论回复
			replySon(fatherId, nickname, uid) {
				this.whoNickname = nickname;
				this.comment.parentId = fatherId;
				this.comment.who = uid;
				console.log(uid, 888);
				wx.nextTick(() => {
					this.$refs.input.onFocus()
				}, 100)

			},
			// 发送评论
			async addComment() {
				if (this.comment.content == "" || this.comment.parentId == "") return;
				// if (this.userInfo.uid == this.comment.who) this.comment.who = "";
				let {
					data: res
				} = await uni.$http.post('/comments/addAComment', this.comment)
				if (res.code == 2000) {
					uni.showToast({
						title: '发送成功',
						duration: 1000,
						icon: 'none'
					})
				}

				this.cancelComment();
				this.getComments();
			},
			// 取消评论
			cancelComment() {
				this.whoNickname = "";
				this.comment.parentId = "0";
				this.comment.content = "";
				this.comment.who = "";
			},
			// 计算楼主回复数
			count(list, uid) {
				list.forEach((x) => {
					if (x.uid == uid) this.masterCount++;
				});
			},
			// 父评论点赞
			async addALikeForFather(id, fatherIndex) {
				let {
					data: res
				} = await uni.$http.get('/comments/addLikes/' + id)
				if (res.code == 2000) {
					this.commentsList[fatherIndex].mark = 1
					this.commentsList[fatherIndex].likes++
					this.msgType = 'success'
					this.messageText = `点赞成功`
					this.$refs.message.open()

				} else {
					this.msgType = 'error'
					this.messageText = `点赞失败`
					this.$refs.message.open()
				}
			},
			// 子评论点赞
			async addALikeForSon(id, fatherIndex, sonIndex) {

				let {
					data: res
				} = await uni.$http.get('/comments/addLikes/' + id)
				if (res.code == 2000) {
					this.commentsList[fatherIndex].sonComments[sonIndex].mark = 1
					this.commentsList[fatherIndex].sonComments[sonIndex].likes++
					this.msgType = 'success'
					this.messageText = `点赞成功`
					this.$refs.message.open()

				} else {
					this.msgType = 'error'
					this.messageText = `点赞失败`
					this.$refs.message.open()
				}

			},
			// 父评论取消赞
			async cancelALikeForFather(id, fatherIndex) {
				let {
					data: res
				} = await uni.$http.get('/comments/cancelLikes/' + id)
				if (res.code == 2000) {
					this.commentsList[fatherIndex].mark = 0
					this.commentsList[fatherIndex].likes--
					this.msgType = 'success'
					this.messageText = `取消成功`
					this.$refs.message.open()

				} else {
					this.msgType = 'error'
					this.messageText = `取消失败`
					this.$refs.message.open()
				}

			},
			// 子评论取消点赞
			async cancelALikeForSon(id, fatherIndex, sonIndex) {

				let {
					data: res
				} = await uni.$http.get('/comments/cancelLikes/' + id)
				if (res.code == 2000) {
					this.commentsList[fatherIndex].sonComments[sonIndex].mark = 0
					this.commentsList[fatherIndex].sonComments[sonIndex].likes--
					this.msgType = 'success'
					this.messageText = `取消成功`
					this.$refs.message.open()

				} else {
					this.msgType = 'error'
					this.messageText = `取消失败`
					this.$refs.message.open()
				}
			},

			// 删除子评论
			async changeSonConfirm(id, fatherIndex, sonIndex) {
				let {
					data: res
				} = await uni.$http.put('/comments/changeStatus/' + this.messageInfo.mid + '/' + id + '/-1')
				if (res.code == 2000) {

					this.commentsList[fatherIndex].sonComments.splice(sonIndex, 1)
					this.msgType = 'success'
					this.messageText = `删除成功`
					this.$refs.message.open()
				} else {
					this.msgType = 'error'
					this.messageText = `删除失败`
					this.$refs.message.open()
				}
			},
			// 删除父评论
			async changeFatherConfirm(id, fatherIndex) {
				let {
					data: res
				} = await uni.$http.put('/comments/changeStatus/' + this.messageInfo.mid + '/' + id + '/-1')
				if (res.code == 2000) {
					this.commentsList.splice(fatherIndex, 1)
					this.msgType = 'success'
					this.messageText = `删除成功`
					this.$refs.message.open()
				} else {
					this.msgType = 'error'
					this.messageText = `删除失败`
					this.$refs.message.open()
				}
			},
		},

	}
</script>

<style lang="less">
	.commentsBox {


		// .Between {
		// 	margin-top: 5px;
		// 	border-bottom: 1px solid rgb(247, 247, 249);
		// }
		.nav ul {
			background-color: #fff;
			display: flex;
			// justify-content: space-between;
			// width: 600rpx;

			li {
				padding: 0 4px;
				margin: 0 5px;
				font-size: 14px;
				line-height: 30px;
				text-align: center;
				color: #000;
				list-style: none;
			}

			.active {
				color: #2979ff;
				// border-bottom: 3px solid #ee0a24;
			}
		}

		.comment {
			padding: 0 10px;
			padding-bottom: 1px;
			background-color: #fff;


			.empty {
				display: flex;
				justify-content: center;
				align-items: flex-end;
				width: 100%;
				height: 200px;
				padding-bottom: 10px;
				background: url('@/static/images/empty-image-default.png') no-repeat;
				background-size: 48%;
				background-position: 50% 50%;
				font-size: 14px;
				color: #dddfe1;
			}

			.AvatarAndNickname {
				display: flex;
			}

			.AddCommentLike {
				display: flex;
				align-items: center;
				margin-right: 25px;
				font-size: 10px;
				color: grey;

			}

			.comments {

				.Father {
					margin-top: 3px;
					margin-bottom: 5px;
					padding-top: 3px;

					.CommentAvatar {

						image {
							width: 40px;
							height: 40px;
							border-radius: 50%;
						}

					}

					.CommentNickname {
						display: flex;
						margin-top: 5px;
						margin-left: 5px;
						// line-height: 15px;
						font-size: 14px;
						color: grey;

						.fTag {
							margin-left: 3px;
							margin-top: -2px;
						}
					}

					.FatherContent {
						margin-top: -15px;
						margin-left: 45px;
						font-weight: bolder;
					}

					.FatherBottom {
						margin-top: 2px;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.DateAndCid {
							display: flex;

							view {
								font-size: 10px;
								color: grey;
							}

							.FatherDate {
								margin-left: 45px;
							}

							.Reply {
								margin-left: 5px;
							}

							.Delete {
								margin-top: 1px;
								margin-left: 5px;
								color: #e43d33;
							}


						}




					}


					.Son {
						margin-top: 5px;
						margin-left: 45px;
						background: rgb(247, 247, 249);
						border-radius: 5px;
						padding-bottom: 5px;

						.SonAvatar {
							image {
								width: 20px;
								height: 20px;
								border-radius: 50%;
							}
						}

						.SonNickname {
							line-height: 13px;
							margin-left: 5px;
							font-size: 10px;
							color: grey;

							image {
								width: 10px;
								height: 10px;
								margin-right: 5px;
								vertical-align: -2px;
							}
						}

						.SonContent {
							margin-top: -5px;
							margin-left: 25px;
							font-size: 15px;
						}

						.SonBottom {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.SonDateAndReply {
								display: flex;

								.Reply {
									margin-top: 2px;
									margin-left: 2px;
								}

								.Delete {
									margin-top: 3px;
									margin-left: 5px;
									color: #e43d33;
								}

								view {
									font-size: 10px;
									color: grey;
								}

								.SonDate {
									margin-top: 2px;
									margin-left: 25px;
								}
							}

						}
					}


					.More {
						margin-top: 3px;
						margin-left: 45px;
						font-size: 10px;
						color: grey;
					}
				}
			}

		}

		.AddComment {
			padding-top: 3px;
			// padding-bottom: 1px;
			position: fixed;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: 0;
			background-color: white;
		}

		.AddCommentButton {
			width: 355px;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.AddCommentLeft {
				flex: 1;
			}

			.AddCommentRight {
				display: flex;
			}

			/deep/ button {
				padding: 0 10px;
			}

			.uni-easyinput {
				width: 284rpx;

				padding: 0;

			}

			.uni-easyinput__content-input {
				height: 28px;
				padding: 0;
			}
		}
	}
</style>
